<template>
  <div class="movie-container">
    <div class="header">
      <div class="text-container">
        <div class="first-title">数据统计</div>
      </div>
    </div>
    <div class="body">
      <div class="box left-box">
        <div class="box-item">
          <div class="box-item-title">
            <span>年月分析</span>
          </div>
          <div class="box-item-chart">
            <div style="text-align: right">
              <RadioGroup
                v-model="ratio"
                @on-change="countDateChange"
                type="button"
                button-style="solid"
                size="small"
              >
                <Radio label="年"></Radio>
                <Radio label="月"></Radio>
              </RadioGroup>

              <DatePicker
                style="width: 120px"
                v-if="ratio == '月'"
                type="year"
                size="small"
                v-model="year"
                placeholder="请选择年份"
                @on-change="countDateSelectedChange"
              >
              </DatePicker>
            </div>
            <div class="chart" id="chart-1"></div>
          </div>
        </div>
        <div class="box-item">
          <div class="box-item-title">
            <span>国家/地区分析</span>
          </div>
          <div class="box-item-chart">
            <div style="text-align: right">
              <Select
                v-model="country"
                @on-change="countAreaChange"
                multiple
                style="width: 160px"
                size="small"
                :max-tag-count="1"
              >
                <Option v-for="item in countryList" :value="item" :key="item">
                  {{ item }}
                </Option>
              </Select>
            </div>
            <div class="chart" id="chart-2"></div>
          </div>
        </div>
      </div>
      <div class="box center-box">
        <div class="top-container">
          <div class="data-row">
            <div class="data-col" v-for="item in scoreList" :key="item">
              <img :src="item.img" alt="" />
              <div class="score-box-item-title">{{ item.title }}</div>
              <div class="score-box-item-value">{{ item.value }}</div>
            </div>
          </div>
        </div>
      
        <div class="carousel-box">
          <Carousel
          autoplay
            :autoplay-speed="2000"
            dots="none"
            v-model="carouselValue"
            loop
          >
            <CarouselItem v-for="item in carouselList" :key="item.src">
              <div class="demo-carousel">
                <div class="overlay-1"></div>
                <div class="overlay-2"></div>
                <img :src="item.src" alt="" />
              </div>
            </CarouselItem>
          </Carousel>
        </div>
      </div>
      <div class="box right-box">
        <div class="box-item">
          <div class="box-item-title">
            <span>类型分析</span>
          </div>
          <div class="box-item-chart">
            <div style="text-align: right">
              <Select
                v-model="category"
                @on-change="countTypeChange"
                multiple
                style="width: 160px"
                size="small"
                :max-tag-count="1"
              >
                <Option v-for="item in categoryList" :value="item" :key="item">
                  {{ item }}
                </Option>
              </Select>
            </div>
            <div class="chart" id="chart-4"></div>
          </div>
        </div>
        <div class="box-item">
          <div class="box-item-title">
            <span>最热主演TOP10</span>
          </div>
          <div class="box-item-chart">
            <div class="chart" id="chart-3"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bigScreen from "./bigScreen";
export default {
  ...bigScreen,
};
</script>

<style scoped>
.movie-container {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/movies/bg-new.jpg") center no-repeat;
  background-size: cover;
}

.header {
  width: 100vw;
  height: 8vh;
  line-height: 7vh;
  color: #fff;
  font-size: 24px;
  text-align: center;
  background: url("../../assets/movies/header-bg.png") center no-repeat;
  background-size: cover;
}

.body {
  width: 100%;
  height: 90vh;
  padding: 2vh 4vh 0;
  display: flex;
  justify-content: space-between;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28%;
  height: 100%;
}

.center-box {
  width: 42%;
}

.box-item {
  height: 49%;
}

.box-item-title {
  height: 32px;
  background: url("../../assets/movies/classify-header-bg.png") center no-repeat;
  background-size: cover;
  line-height: 32px;
}

.box-item-title span {
  font-size: 18px;
  font-weight: 600;
  background-image: linear-gradient(180deg, #f8fdff, #abe2ff);
  color: transparent;
  -webkit-background-clip: text;
  letter-spacing: 2px;
  text-align: left;
}

.top-container {
  height: 327px;
  width: 100%;
  margin: 0 auto;
  background: url("../../assets/movies/center-top-bg.png") center no-repeat;
  background-size: 100% 101%;
  padding: 12px 32px 32px;
}

.data-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin-top: 14px;
}

.data-col {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 24%;
  height: 100%;
}

.data-col img {
  width: 100%;
  height: 65%;
}

.score-box-item-title {
  color: #bbbbbb;
  font-weight: bold;
  font-size: 18px;
}

.score-box-item-value {
  font-family: fantasy;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  letter-spacing: 0px;
  font-feature-settings: "kern" on;
  background: linear-gradient(180deg, #ffffff 0%, #f9cd80 97%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.carousel-box {
  width: 100%;
}

.demo-carousel {
  width: 100%;
  height: 500px;
  overflow: hidden;
  /* 防止图片溢出容器 */
  position: relative;
}

.demo-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-1 {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 0px;
  opacity: 1;
  background: linear-gradient(
    0deg,
    rgba(25, 24, 37, 0) 0%,
    rgba(25, 24, 37, 0.3) 33.85%,
    rgba(25, 24, 37, 0.9) 100%
  );
}

.overlay-2 {
  position: absolute;
  width: 100%;
  height: 300px;
  bottom: 0px;
  opacity: 1;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(25, 24, 37, 0.7) 55.85%,
    rgba(25, 24, 37, 0) 100%
  );
}

.chart {
  width: 100%;
  height: 36vh;
}
</style>